<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <script src="http://localhost:8097"></script> -->
  <title>Jellyplayer</title>
  <style>
    .app-loading {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: #222;
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity 0.25s ease-in-out;
    }

    .app-loading.hidden {
      display: none;
    }

    .app-loading-logo {
      width: 40vw;
      opacity: 0;
      animation: fadeIn linear 500ms forwards;
    }

    .circular {
      animation: rotate 1.2s linear infinite;
      height: 50px;
      left: 50%;
      position: absolute;
      bottom: 20%;
      width: 50px; 
    }
    .path {
      stroke-dasharray: 1,200;
      stroke-dashoffset: 0;
      animation: 
       dash 800ms ease-in-out infinite,
       color 6s ease-in-out infinite
      ;
      stroke-linecap: round;
      stroke: #fff;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes dash {
      0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
      }
      100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
      }
    }
    @keyframes fadeIn {
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="app-loading">
    <img src="/assetsStatic/logoDark.png" class="app-loading-logo" />
    <svg class="circular" height="50" width="50">
      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" />
    </svg>
  </div>
  <div id="root"></div>
  <svg style="width: 0; height: 0; position: absolute" aria-hidden="true" focusable="false">
    <linearGradient id="clr-gradient-default" x2="1" y2="1">
      <stop offset="0%" stop-color="hsl(337, 96%, 56%)" />
      <stop offset="100%" stop-color="hsl(273, 100%, 36%)" />
    </linearGradient>
  </svg>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>